<template>
  <div class="app-container">
    <h1 class="app-title">OCR图像问答系统</h1>
    
    <!-- 功能选择栏 -->
    <div class="tab-container">
      <el-tabs v-model="activeTab" type="card">
        <el-tab-pane label="图像识别问答" name="imageQa">
          <ImageQaCard />
        </el-tab-pane>
        <el-tab-pane label="AI智能问答" name="chatBox">
          <ChatBox />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import ImageQaCard from './components/ImageQaCard.vue'
import ChatBox from './components/ChatBox.vue'

export default {
  name: 'App',
  components: {
    ImageQaCard,
    ChatBox
  },
  data() {
    return {
      activeTab: 'imageQa'
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  background-color: #f5f7fa;
  color: #333;
}

.app-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.app-title {
  text-align: center;
  margin: 20px 0;
  color: #409EFF;
}

.tab-container {
  margin-top: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.el-tabs__content {
  padding: 20px 0;
  display: flex;
  justify-content: center;
}
</style> 